import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Textarea } from "../input-textarea";
// import { createWS, sendWSMessage } from "@/api/chat";
// import { useConversationStore } from "@/store/useConversationStore";
// import type { WSClient } from "@/utils/ws";
// import { useChatStore } from "@/store/useChatStore";
import arrow from "@/assets/arrow.svg";
import phone from "@/assets/phone.svg";
import VoiceCall from "./voice-call";

export function ChatInput({
  sendMessage,
}: {
  sendMessage: (message: string) => void;
}) {
  const [inputValue, setInputValue] = useState("");
  const [isVoiceCall, setIsVoiceCall] = useState(false);

  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setInputValue(e.target.value);
    console.log(inputValue);
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!inputValue.trim()) return;
    sendMessage(inputValue);
    setInputValue("");
  };

  const handleVoiceCall = () => {
    console.log("语音调用");
    // ws.current?.close();
    setIsVoiceCall(true);
  };

  return (
    <>
      {isVoiceCall && <VoiceCall onClose={() => setIsVoiceCall(false)} />}
      <div className="flex w-full justify-center">
        <div
          className="w-4/5 flex items-end gap-2 px-2 py-2 rounded-[27px] 
        bg-surface-elevation-1 border border-gray-300  mb-[20px] mr-[10px] relative"
        >
          <Textarea
            value={inputValue}
            placeholder="Type your message here..."
            rows={1}
            className="flex-grow border-none bg-transparent resize-none
                      focus:ring-0 focus:outline-none text-sm !ring-0 !shadow-none
                      min-h-[20px] max-h-[200px] leading-[20px] overflow-y-auto
                      max-w-[800px]"
            style={{ height: "auto" }}
            onInput={(e) => {
              const target = e.currentTarget;
              target.style.height = "auto"; // 重置高度
              target.style.height = `${target.scrollHeight}px`; // 自适应高度
            }}
            onChange={handleInputChange}
            onKeyDown={(e) => {
              // Enter 发送，Shift+Enter 换行
              if (e.key === "Enter" && !e.shiftKey) {
                e.preventDefault(); // 阻止插入换行
                if (!inputValue.trim()) return;
                sendMessage(inputValue);
                setInputValue("");
                const target = e.currentTarget as HTMLTextAreaElement;
                target.style.height = "auto";
              }
            }}
          />
          <Button
            size="icon"
            className="w-[36px] h-[36px] rounded-full flex items-center justify-center self-end"
            onClick={handleSubmit}
          >
            <img src={arrow} alt="send" />
          </Button>
        </div>
        {!inputValue && (
          <div className="py-2">
            <div className="relative inline-block">
              <Button
                size="icon"
                className="peer w-[36px] h-[36px] rounded-full bg-white border border-gray-400 hover:bg-white"
                onClick={handleVoiceCall}
              >
                <img width={20} height={20} src={phone} alt="send" />
              </Button>

              <span
                className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2
               px-2 py-1 bg-gray-800 text-white text-xs rounded
               whitespace-nowrap opacity-0 peer-hover:opacity-100
               transition-opacity duration-200"
              >
                语音模式
              </span>
            </div>
          </div>
        )}
      </div>
    </>
  );
}
